<template>
  <div>
    <el-row>
      <el-col :span="24" align="right">
        <el-form :model="query" inline>
          <el-form-item>
            <el-input v-model="query.name" placeholder="请输入事件名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable v-model="query.dept" placeholder="请输入所属部门">
              <el-option v-for="(v,i) in deptList" :key="i" :value="v.name" :label="v.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-table :data="List" border>
          <el-table-column type="index" width="80"></el-table-column>
          <el-table-column v-for="(v,k,i) in prop" :key="i" :label="label[i]" prop="" align="center">
            <template scope="scope">
              <span v-if="k==='sex'">
                {{scope.row[k]==1?'男':'女'}}
              </span>
              <span v-else-if="k=='ssEventKind'">
                {{scope.row[k]==1?'一般事件':'重大事件'}}
              </span>
              <span v-else>
                {{scope.row[k]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template scope="scope">
              <el-button type="text" @click="Info(scope.row.ssEventID)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="float:right;margin-top:120px;" layout="prev, pager, next" :total="totalInfo" @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>
    <div v-if="chartData.length>0" class="chart_pos">
      <div id="chart" style="height:300px;width:100%"></div>
    </div>
    <el-dialog top="5%" title="查看详情" :visible.sync="visible">
      <info :id="id"></info>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "../../api/netGridManage";
import info from "../publicSecurityManage/eventInfo";
import * as api2 from "@/api/systemManage";
export default {
  components: {
    info
  },
  data() {
    return {
      visible: false,
      chartData: [],
      List: [],
      id: null,
      totalInfo: 0,
      query: {
        dept: "",
        name: "",
        page: 1,
        pageSize: 10,
        isDC: 1
      },
      deptList: [],
      prop: {
        ssEventName: "",
        ssEventKind: "", //               '事件性质，如1=一般事件；2=重大事件；等',
        ssEventTypeName: "", //          '事件类型，如杀人、放火、抢劫等',
        ssEventStatusTypeName: "", //     '当前事件处理的最新状态',
        ssEventStartDateTime: "",
        netGridName: "" //所属网格
      },
      label: [
        "事件名称",
        "事件性质",
        "事件类型",
        "事件处理状态",
        "发生日期",
        "所属网格"
      ]
    };
  },
  methods: {
    Info(id) {
      this.id = id;
      this.visible = true;
    },
    getKind(id) {
      switch (id) {
        case 1:
          return "一般事件";
        case 2:
          return "重大事件";
        case 3:
          return "简单事件";
      }
    },
    search() {
      api.getSSEventForNetGrid(this.query).then(res => {
        this.List = res.data.vos;
        this.totalInfo = res.data.page.totalCount;
      });
    },
    handleCurrentChange(val) {
      this.query.page = val;
      this.search();
    },
    async initChart() {
      let { data } = await api.getSSEventOverdueCount();
      this.chartData = data;
      let type = [];
      data.forEach(({ name }) => [type.push(name)]);
      if (this.chartData.length > 0) {
        this.$nextTick(() => {
          this.chart = echarts.init(document.getElementById("chart"));
          var option = {
            title: {
              text: "各部门延期处理事件数",
              x: "center"
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            series: [
              {
                name: "延期数据",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                },
                data: data
              }
            ]
          };
          this.chart.setOption(option);
        });
      }
    }
  },
  async mounted() {
    this.search();
    this.initChart();
    let { data } = await api2.getDeptInfo();
    this.deptList = data;
  }
};
</script>

<style scoped>
.chart_pos {
  position: fixed;
  padding: 10px;
  right: 0;
  bottom: 0;
  min-width: 20vw;
  max-width: 40vw;
  border: 1px solid #eee;
  box-shadow: 0 0 10px #666;
}
</style>
